function patch(oldNode,vNode){
    let el = createElement(vNode);
    let parentElement = oldNode.parentNode;
    parentElement.insertBefore(el,oldNode.nextSibling) // 将新元素插入到旧元素之后
    parentElement.removeChild(oldNode)
}
function createElement(vnode){
    const {tag,props,children,text} = vnode;
    if (typeof tag === 'string'){
        vnode.el = document.createElement(tag); // 创建元素
        updateProps(vnode) // 更新属性
        children.map((child)=>{
            vnode.el.appendChild(createElement(child)); // 递归创建子元素
        })

    }else{
        vnode.el = document.createTextNode(text); // 创建文本节点
    }

    return vnode.el;

}

function updateProps(vnode){
    const el = vnode.el;
    const newProps = vnode.props || {};
    for (let key in newProps){
        if (key === 'style'){
            for (let styleKey in newProps[key]){
                el.style[styleKey] = newProps[key][styleKey]; // 更新样式
            }

        }else if (key === 'class'){
            el.className = newProps.class // 更新class
        }else{
            el.setAttribute(key,newProps[key]) //   更新属性
        }
    }
}


export {
    patch
}